<template>
	<div class="word_table" id="word_table">
		<ul class="false_table">
			<li class="table_title">
				<div class="spe_title">
					<div>留言ID</div>
				</div>
				<div class="spe_title">
					<div>时间</div>
				</div>
				<div>
					<div>留言人</div>
				</div>
				<div class="spe_title">
					<div>商家</div>
				</div>
				<div class="spe_title">
					<div>留言地址</div>
				</div>
				<div>
					<div>查看数量</div>
				</div>
				<div>
					<div>点赞数量</div>
				</div>
				<div>
					<div>状态</div>
				</div>
				<div class="spe_title">
					<div>操作</div>
				</div>
			</li>
			<li v-for="item in wordlist">
				<div class="spe_title">{{item.id}}</div>
				<div class="spe_title">{{item.wordTime}}</div>
				<div>{{item.username}}</div>
				<div class="spe_title">{{item.brandName}}</div>
				<div class="spe_title">{{item.address}}</div>
				<div>{{item.readnum}}</div>
				<div>{{item.praisenum}}</div>
				<div v-if="item.deleted==false">已发布</div>
				<div v-if="item.deleted==true">未发布</div>
				<div class="word_deal">
					<button v-on:click="checknote(item.id)">查看</button>
					<button v-on:click="deletenote(item.id)">下线</button>
				</div>
			</li>
		</ul>
		<!--<div class="table_foot">
			<div class="page">
				<ol>
					<li><</li>
					<li>1</li>
					<li>2</li>
					<li class="current">3</li>
					<li>···</li>
					<li>10</li>
					<li>></li>
				</ol>
			</div>
		</div>-->
		<checkword ref="wxref"></checkword>
	</div>
	
</template>

<script>
	
	import checkword from './check_word'
	export default {
		name: 'word_table',
		computed: {
			
		},
		data() {
			return {
				wordlist:[]
			}
		}, //定义变量
		components: {
			checkword
		}, //注册组件
		methods: {//方法都在这里
			deletenote:function(id){
				var that=this
				var delId={
					key:id
				}
				alert("下线后该留言将不再显示，<br >您确定要下线该留言吗？", 1).done(function(data) {
					if(data == 'ok') {
						that.lh_http('post', "tbWords/del.do",delId).done(function(res) {
//							console.log(res)
							if(res.status) {
								that.readyWord()
							} else {
								alert(res.data);
							}
						})
					}
				});
			},
			checknote:function(id){
//				console.log(id)
				this.$refs.wxref.showword(id);
			},
			readyWord:function(){
				var that = this;
				var wordInfo={
					brandId:0
				}
				this.lh_http('post', "tbWords/tbWordsJsonList.do",wordInfo).done(function(res) {
					if(res.status) {
//						console.log(res)
						that.wordlist=res.data.tbWordsList
					} else {
						alert(res.data);
					}
				})
			}
		},
		mounted() {
			var that = this;
			//获取banner
		},
		beforeCreate:function(){
			var that = this;
			var wordInfo={
				brandId:0
			}
			this.lh_http('post', "tbWords/tbWordsJsonList.do",wordInfo).done(function(res) {
				if(res.status) {
//					console.log(res)
					that.wordlist=res.data.tbWordsList
				} else {
					alert(res.data);
				}
			})
		}		
	}
</script>

<style lang="scss">
	.word_table {
		margin-top:20px;
		.false_table {
			width: 1080px;
			text-align: center;
			font-size: 14px;
			border-collapse: collapse;
			li {
				width: 1080px;
				height: 60px;
				border: #fff solid 2px;
				div {
					float: left;
					width: 72px;
					height: 60px;
					line-height: 60px;
					margin: 0 2px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.spe_title {
					width: 150px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				.word_deal{
					width:150px;
					button{
						background:#fff;
						color:#007AFF;
						cursor: pointer;
					}
					
				}
			}
			li:first-child {
				width: 1080px;
				height: 60px;
				div {
					float: left;
					width: 72px;
					height: 60px;
					line-height: 60px;
					border: 0;
					margin: 0 2px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					div {
						border-bottom: #007AFF solid 2px;
						input {
							margin-right: 10px;
							vertical-align: middle;
						}
					}
				}
				.spe_title {
					width: 150px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
					div {
						width: 150px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
			li:hover {
				border: #007AFF solid 2px;
			}
			.table_title:hover {
				border: #fff solid 2px;
			}
		}
		.table_foot {
			width: 1080px;
			height: 50px;
			margin-top: 40px;
			.page {
				width: 170px;
				height: 10px;
				float: right;
				ol {
					width: 170px;
					height: 20px;
					li {
						width: 20px;
						height: 20px;
						float: left;
						line-height: 20px;
						text-align: center;
						margin-right: 5px;
					}
					li.current {
						background: #007AFF;
						color: #fff;
						border-radius: 2px;
					}
					li:last-child {
						margin: 0;
					}
				}
			}
		}
	}
</style>